import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window  {
    id: mainWindow
    title: "TextField Demo"
    color: "white"
    visible: true
    width: 800
    height: 600

    RowLayout {
        anchors.fill: parent

        // 左侧导航栏
        ListView {
            id: navList
            Layout.preferredWidth: 180
            Layout.fillHeight: true
            section.property: "category"
            section.criteria: ViewSection.FullString
            section.delegate: Rectangle {
                width: parent ? parent.width : 180
                height: 35
                color: "#F5F7FA"
                Text {
                    x: 6
                    anchors.verticalCenter: parent.verticalCenter
                    text: section
                    color: "#1296FF"
                    font.pointSize: 12
                    font.bold: true
                }
            }
            model: ListModel {
                ListElement { name: "基础示例"; category: "TextField基础" }
                ListElement { name: "输入限制"; category: "TextField基础" }

                ListElement { name: "年龄校验"; category: "TextField校验" }
                ListElement { name: "邮箱格式校验"; category: "TextField校验" }
                ListElement { name: "手机号校验"; category: "TextField校验" }
                ListElement { name: "掩码与日期校验"; category: "TextField校验" }
                ListElement { name: "IP地址校验"; category: "TextField校验" }
                ListElement { name: "身份证校验"; category: "TextField校验" }

                ListElement { name: "自定义文本框"; category: "TextField样式" }
                ListElement { name: "带图标的文本框"; category: "TextField样式" }
                ListElement { name: "带删除的文本框"; category: "TextField样式" }
                ListElement { name: "主题切换"; category: "TextField样式" }

                ListElement { name: "自动关联"; category: "TextField应用" }
                ListElement { name: "表单提交"; category: "TextField应用" }
            }

            delegate: Rectangle {
                width: parent ? parent.width : 180
                height: 35
                color: ListView.isCurrentItem ? "#BCE6FF": "#FFF"
                border.width: 0

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        parent.ListView.view.currentIndex = index
                        contentStack.currentIndex = index
                    }
                }

                Text {
                    x: 6
                    anchors.verticalCenter: parent.verticalCenter
                    text: name
                    color: "#333"
                    font.pointSize: 10.5
                    font.bold: true
                }
            }
        }

        // 右侧内容区
        StackLayout {
            id: contentStack
            Layout.fillWidth: true
            Layout.fillHeight: true

            // 这里按顺序放各个效果组件

            // 基础属性
            TextFieldBase {}
            TextFieldInputLimit {}

            // 验证器
            TextFieldValidator1 {}
            TextFieldValidator2 {}
            TextFieldValidator3 {}
            TextFieldInputMask {}
            TextFieldValidator4 {}
            TextFieldValidator5 {}

            // 样式
            TextFieldStyle1 {}
            TextFieldStyle2 {}
            TextFieldStyle3 {}
            TextFieldMultipleTopic {}

            // 应用
            TextFieldAutoMatch {}
            TextFieldFormSubmission {}
        }
    }
}
